// 编译元素节点，处理指令
compileElement (node) {
  // console.log(node.attributes)
  // 遍历所有的属性节点
  Array.from(node.attributes).forEach(attr => {
    // 判断是否是指令
    let attrName = attr.name
    if (this.isDirective(attrName)) {
      if (attrName.startsWith('@') || attrName.startsWith('v-on')) {
        attrName = attrName.substr(attrName.indexOf(':') + 1 || attrName.indexOf('@') + 1)
        let key = attr.value
        this.onDirective(node, key, attrName)
      } else {
        // v-text --> text
        attrName = attrName.substr(2)
        let key = attr.value
        this.update(node, key, attrName)
      }
    }
  })
}

// v-html
htmlUpdater (node, value, key) {
  node.innerHTML = value
  new Watcher(this.vm, key, (newValue) => {
    node.innerHTML = newValue
  })
}

// v-on
onDirective (node, value, key) {
  console.log(node, value, key)
  node.addEventListener(key, () => {
    if (this.vm.$options.methods[value]) {
      let func = this.vm.$options.methods[value].bind(this.vm)
      func()
    } else {
      // 直接嵌套js代码的情况没有想出来
    }
  })
}

// 判断元素属性是否是指令
isDirective (attrName) {
  return attrName.startsWith('v-') || attrName.startsWith('@')
}